// 主题颜色
$themes: (
  light: (
    bgColor: #fff,
    textColor: #000
  ),
  dark: (
    bgColor: #000,
    textColor: #fff
  )
);
$curTheme: 'light';
@mixin useTheme() {
  @each $key, $value in $themes {
    $curTheme: $key !global;
    html[data-theme='#{key}'] & {
      @content;
    }
  }
  //   html[data-theme='light'] & {
  //     background-color: #fff;
  //     color: #000;
  //   }

  //   html[data-theme='dark'] & {
  //     background-color: #000;
  //     color: #fff;
  //   }
}

@function getVar($paramName) {
  $themeMap: map-get($themes, $curTheme);
  @return map-get($themeMap, $paramName);
}
.item {
  width: 100px;
  height: 100px;
  @include useTheme {
    background-color: getVar(bgColor);
    color: #000;
  }
}

// theme.scss

$q-white: #fff;
$q-black: #000000;

.dark {
  background-color: #fff;
  color: $q-black;
}
.light {
  background-color: $q-black;
  color: $q-white;
}
